<template>
  <div class="suppliers">
    <avue-form :option="searchOptions" v-model="searchForm" @submit="onLoad(page)" />
    <avue-crud
      @selection-change="onSelectionChange"
      :table-loading="loading"
      :page.sync="page"
      @on-load="onLoad"
      :data="suppliers"
      :option="option"
    >
      <template v-if="!multiple" slot="radio" slot-scope="{ row }">
        <el-radio v-model="selectRow" :label="row.id" @change="id => onRadioChange({ id })" />
      </template>
    </avue-crud>
  </div>
</template>

<script>
import { page } from '@/option/tenant/supplier/info'
import { getList } from '@/api/supplier/info'
export default {
  name: 'Suppliers',
  props: {
    multiple: Boolean,
    value: Object,
    columns: { type: Array, default: () => null },
    formColumns: { type: Array, default: () => null }
  },
  model: { prop: 'value', event: 'change' },
  data() {
    return {
      suppliers: [],
      page,
      loading: false,
      selectRow: '',
      searchForm: { supplierName: '', supplierCode: '' },
      searchOptions: {
        labelWidth: 120,
        submitBtn: false,
        emptyBtn: false,
        submitText: '确认',
        column: this.formColumns || [
          {
            label: '供应商名称',
            prop: 'supplierName',
            span: 12,
            enter: ({ value }) => this.onLoad(this.page, { supplierName: this.searchForm.supplierName })
          },
          {
            label: '供应商编码',
            prop: 'supplierCode',
            span: 12,
            enter: ({ value }) => this.onLoad(this.page, { supplierCode: this.searchForm.supplierCode })
          }
        ]
      },
      option: {
        header: false,
        size: 'mini',
        tip: false,
        menu: false,
        border: true,
        addBtn: false,
        headerAlign: 'center',
        align: 'center',
        index: false,
        selection: this.multiple,
        tableId: 'supplier-selector',
        column:
          this.columns ||
          [
            !this.multiple && { label: '选择', prop: 'radio', width: 50 },
            { label: '供应商编码', prop: 'supplierCode' },
            { label: '供应商名称', prop: 'supplierName' },
            { label: '供应商简称', prop: 'supplierShortName' },
            { label: '联系人', prop: 'contact' },
            { label: '手机号', prop: 'phone' }
          ].filter(Boolean)
      }
    }
  },
  methods: {
    onRadioChange({ id }) {
      if (this.multiple) return
      const row = this.suppliers.find(item => item.id === id)
      this.$emit('update:buttons', [
        {
          text: '确认',
          disabled: !row,
          callback: () => {
            this.$emit('change', row)
            this.$emit('update:visible', false)
          }
        }
      ])
      // if (!row) return
      // this.$emit('change', row)
      // this.$emit('update:visible', false)
    },
    onSelectionChange(rows) {
      this.$emit('update:buttons', [
        {
          text: '确认',
          disabled: rows.length <= 0,
          callback: () => {
            this.$emit('change', rows)
            this.$emit('update:visible', false)
          }
        }
      ])
    },
    onLoad(page, params = {}) {
      console.log(params)
      this.loading = true
      getList(page.currentPage, page.pageSize, params).then(res => {
        const { total, records } = res.data.data
        this.page.total = total
        this.suppliers = records
        this.loading = false
      })
    }
  }
}
</script>
<style>
.suppliers .el-radio .el-radio__label {
  display: none !important;
}
</style>
